<template >
    <div class="info-container">
        <!-- 筛选用户 -->
        <div class="selectForm" :model="selectForm">
            
            <el-row justify="center">
                <el-col :span="2" class="select-text">
                    <b>筛选编辑</b>
                </el-col>
                <el-col :span="5">
                    <div class="input">
                        <el-input
                            placeholder="请输入用户名"
                            v-model="selectForm.name">
                        </el-input>
                    </div>
                </el-col>
                <div class="input">
                    <el-col :span="5">
                        <el-input
                            placeholder="请输入用户手机号"
                            v-model="selectForm.phone">
                        </el-input>
                    </el-col>
                </div>
                <el-col :span="2">
                    <el-button type="primary" @click="getUserList()">搜索</el-button>
                </el-col>
            </el-row>
            
        </div>
        <el-divider></el-divider>
        <!-- 编辑列表 -->
        <el-table :data="userdata.userlist" stripe style="width: 100%" border
        :header-cell-style="{background:'rgb(178, 147, 147)',color:'rgb(57, 50, 50)'}">
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column prop="userName" label="用户名"></el-table-column>
            <el-table-column prop="email" label="邮箱"></el-table-column>
            <el-table-column prop="phone" label="电话"></el-table-column>
            <!-- <el-table-column prop="id" label="id"></el-table-column> -->
            <el-table-column prop="occupation" label="职位"></el-table-column>
            <el-table-column prop="workPlace" label="工作地点"></el-table-column>
            <el-table-column label="操作" width="150px">
                <template slot-scope="scope">
                    <!-- 删除按钮 -->
                    <el-button type="danger" size="small" @click="deleteOne(scope.row.id)">注销编辑</el-button>
                </template>
            </el-table-column>
      </el-table>
      <!-- 分页 -->
       <el-pagination
        layout="total, prev, pager, next"
        :total="this.userdata.total"
        @current-change="handleCurrentChange" 
        :current-page="currentPage"
        :page-size="pagesize"
      >
      </el-pagination> 
    </div>
</template>

<script>
    import requests from '@/api/ajax'
    export default {
        name: 'Editormanage',
        data() {
            return{
                userdata: {
                    userlist: [],
                    total: 0
                },
                selectForm: {
                    name: '',
                    phone: ''
                },
                currentPage: 1, //当前页 刷新后默认显示第一页
                pagesize: 8
            }
        },
        created() {
            this.getUserList()
        },
        methods: {
            deleteOne(id) {
                this.$messagebox.confirm('此操作将注销该编辑, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(
                    () => {
                        requests.delete('/users/cancel/' + id)
                        this.$message.success('您已成功注销该编辑~')
                        this.$router.go(0)
                    }
                ).catch(
                    () => {
                        this.$message.info('已取消注销')
                    }
                )
            },
            getUserList() {
                requests.get('/users/getEdits',{
                    params: {
                        page: 1,
                        pageSize: 8,
                        name: this.selectForm.name,
                        phone: this.selectForm.phone
                    }
                }).then(
                    (res) => {
                        // console.log(this.currentPage)
                        // console.log(res.data.records)
                        this.userdata.userlist = res.data.records
                        this.userdata.total = res.data.total
                    }
                )
            },
            handleCurrentChange(currentPage) { // 跳转页面
                this.currentPage = currentPage
                // console.log(this.currentPage)
                requests.get('/users/getEdits',{
                    params: {
                        page: this.currentPage,
                        pageSize: 8,
                        name: this.selectForm.name,
                        phone: this.selectForm.phone
                    }
                }).then(
                    (res) => {
                        // console.log(this.currentPage)
                        // console.log(res.data.records)
                        this.userdata.userlist = res.data.records
                        this.userdata.total = res.data.total
                    }
                )
            }
        }
    }
</script>

<style lang="less" scoped>
    .info_container{
      height: 600px;
      width: 700px;
      margin-left: 150px;
      margin-top: 50px;
      font-size: larger;
    }
    .select-text {
        padding-top: 10px;
    }

</style>